
import React from 'react';
import PropTypes from 'prop-types';
import { Spin, Select } from 'antd';
import { connect } from 'dva';
import { getCustEsOsList , getEsOnceCustList , getCustList } from '@/services/api';
import HOCSelect from '@/components/AntDesign/Select';

const { Option } = Select;

@connect(({ login }) => ({
  suppId:login.baseUser.suppId,
}))
/**
 * 客户模糊查询-state版 (无单向数据流)
 */
class Customer extends React.Component {

  static propTypes = {
    onChange: PropTypes.func,
    attr:PropTypes.bool,
    isShowSupp:PropTypes.bool,
    isEsOnceCust:PropTypes.bool,
    isSelfSupp:PropTypes.bool,
    suppId:PropTypes.string,
  }

  static defaultProps = {
    onChange: () => {},
    attr: false,
    isShowSupp: false,
    isEsOnceCust: false,
    isSelfSupp: false,
    suppId: undefined,
  }

  constructor(props){
    super(props);
    this.state = {
      custList:[], // 客户列表
      custVal : undefined, // 返回给父组件的值
      loading: false
    }
  }

  componentDidMount() {
    const { custVal } = this.state;
    const { onRef } = this.props;
    if (onRef) {
      onRef(this);
    }
    // 回显时立即查询
    this.fetchCustomerList(custVal || '');
  }

  static getDerivedStateFromProps(nextProps,prevState){
    // 重置客户
    if(!nextProps.value && prevState.custVal){
      return {
        custVal:undefined
      }
    }
    return null;
  }

  /**
   * 获取客户列表
   */
  fetchCustomerList = async value => {
    const { attr, isSelfSupp, isEsOnceCust ,suppId } = this.props;
    if (value.trim().length) {
      const name = value.trim();
      const vo = isSelfSupp ? { name, suppId } : { name }
      let res  = null;
      try {
        // 设置正在读取
        this.setState({ loading: true })
        if (attr) {
          // 非客服系统查询客户列表
          res  = await getCustEsOsList(vo)
        } else if (isEsOnceCust) {
          // 员工一次性费用新增查询客户列表
          res  = await getEsOnceCustList(vo)
          // 客服系统查询客户列表
        } else {
          res  = await getCustList(vo)
        }
        if(res && res.success){
          this.setState({
            custList : res.data,
            loading : false
          })
        }
      }catch(e){
        console.error(e)
      }finally{
        // 结束后关闭读取状态
        this.setState({ loading : false })
      }
    }
  };

  // 更改当前选择的值并供给父组件用
  triggerChange(changeValue, options) {
    const { onChange, dispatch, ...rest } = this.props;
    if (onChange) {
      onChange(changeValue, options);
    }
    let custVal;
    if(options){
      custVal = rest.labelInValue ? { key: options.key, label: options.title } : options.title;
    }else{
      custVal = undefined;
    }
    this.setState({
      custVal,
    })
  }


  render() {
    const {
      getData = () => {},
      attr,
      isShowSupp = false,
      ...rest
    } = this.props;
    const { custList, custVal, loading } = this.state;

    return (
      <HOCSelect
        placeholder="请输入关键字检索"
        {...rest}
        showSearch
        value={custVal}
        optionFilterProp="children"
        showArrow={false}
        onSearch={this.fetchCustomerList}
        onSelect={(selectValue, options) => getData(selectValue, options)}
        notFoundContent={loading ? <Spin size="small" /> : '暂无数据'}
        onChange={(changeValue, options) => this.triggerChange(changeValue, options)}
      >
        {custList && custList.map(item => (
          <Option
            key={attr ? item.mdCustId : item.custId}
            title={isShowSupp && item.suppName ? `${item.name}(${item.suppName})` : item.name}
            fsoptions={item}
          >
            {isShowSupp && item.suppName ? `${item.name}(${item.suppName})` : item.name}
          </Option>
        ))}
      </HOCSelect>
    );
  }
}

export default Customer;
